<template>
	<view class="billList">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>账单</custom-navi>
		<view class="billList-date">
			<dyDate timeType='month' @getData="getData"></dyDate>
		</view>
		<view class="billList-content">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData">
				<view class="list" v-for="(item,index) in dataList" :key="index" @tap="particularsBtn">
					<view class="list-txt">
						<view class="title">{{item.title}}</view>
						<view class="txt">{{item.earnings}}</view>
					</view>
					<view class="list-time">
						{{item.time}}
					</view>

				</view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	import sPullScroll from '@/src/pages/components/s-pull-scroll/index.vue';
	import dyDate from '@/components/dy-Date/dy-Date.vue';
	export default {
		components: {
			sPullScroll,
			dyDate
		},
		data() {
			
			return {
				
				dataList: [{
						title: '推广收益',
						time: '1月13日',
						earnings: '+88.03'
					},
					{
						title: '推广收益',
						time: '1月13日',
						earnings: '+88.03'
					},
					{
						title: '推广收益',
						time: '1月13日',
						earnings: '+88.03'
					},
					{
						title: '推广收益',
						time: '1月13日',
						earnings: '+88.03'
					},
					{
						title: '推广收益',
						time: '1月13日',
						earnings: '+88.03'
					},
					{
						title: '推广收益',
						time: '1月13日',
						earnings: '+88.03'
					},
					{
						title: '推广收益',
						time: '1月13日',
						earnings: '+88.03'
					},
					{
						title: '推广收益',
						time: '1月13日',
						earnings: '+88.03'
					},
				],
				size:'',
				page:'',
			}
		},
		onLoad() {

		},
		
		methods: {
			//****************************************************
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					if (pullScroll.page == 1) {
						this.page = 1
						this.size = 10
						// this.listFrom()
					} else {
						if (this.size > this.total) {
							pullScroll.empty()
						} else {
							// this.page=this.page+1
							this.size = this.size + 10
							// this.listPush()
							// this.listFrom()
						}
					}

					pullScroll.success();
				}, 1000);
			},
			//**********************************************************
			
			
			particularsBtn(){
				uni.navigateTo({
					url:'particulars/index'
				})
			},
			getData(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.billList {
		height: 100vh;
		background-color: #FFFFFF;
		&-content{
			position: relative;
			height: 84%;
			// margin-top: 20rpx;
			.list{
				padding: 36rpx 40rpx;
				border-bottom: 2rpx solid rgba(229, 234, 238, 1);
				&-time{
					font-size:28rpx;
					font-family:Source Han Sans CN;
					font-weight:400;
					color:rgba(207,207,207,1);
					opacity:1;
				}
				&-txt{
					display: flex;
					.title{
						font-size:32rpx;
						font-family:Source Han Sans CN;
						font-weight:400;
						color:rgba(69,69,69,1);
						opacity:1;
					}
					.txt{
						margin-left: auto;
						font-size:36rpx;
						font-family:Source Han Sans CN;
						font-weight:bold;
						color:rgba(242,85,85,1);
						opacity:1;
					}
				}
			}
		}
		&-date {
			width: 100%;
			height: 100rpx;
			background: rgba(242, 242, 242, 1);
			opacity: 1;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: rgba(69, 69, 69, 1);
			opacity: 1;
			padding: 28rpx 40rpx;
		}
	}
</style>
